<template>
  <div class="page grey-stage">
    <div class="performance" :style="{'height': this.winHeight + 'px'}">
      <div class="performance-list"
      v-infinite-scroll="loadPerformances"
      :infinite-scroll-disabled="performanceLoading"
      :infinite-scroll-distance="100">
        <group title="筛选时间">
          <datetime v-model="beginTime" @on-change="change" title="开始时间" :value="beginTime"></datetime>
          <datetime v-model="endTime" @on-change="change" title="结束时间" :value="endTime"></datetime>
        </group>
        <div class="no-data-tip" v-if="!performances.length">{{ dataTip }}</div>
        <group v-for="(performance, index) in performances" :key="index">
          <cell v-if="performance.is_new" title="首次签约"><span class="undo-btn" @click="$undoOrder(performance)" v-if="performance.status === 'OK##'">撤销</span></cell>
          <cell v-if="!performance.is_new" title="续报签约"><span class="undo-btn" @click="$undoOrder(performance)" v-if="performance.status === 'OK##'">撤销</span></cell>
          <div class="weui-cell vux-cell-form-preview">
            <div class="weui-form-preview__bd">
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">家长</label>
                <span class="weui-form-preview__value">{{ performance.parent_name }}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">宝宝</label>
                <span class="weui-form-preview__value">{{ performance.baby_name }}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">家长手机</label>
                <span class="weui-form-preview__value">{{ performance.mobile_num }}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">顾问</label>
                <span class="weui-form-preview__value">{{ performance.assist_name }}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">签约金额</label>
                <span class="weui-form-preview__value">{{ performance.contract_money }}</span>
              </div>
              <div class="weui-form-preview__item" v-if="performance.deposit">
                <label class="weui-form-preview__label">定金</label>
                <span class="weui-form-preview__value">{{ performance.deposit }}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">合同编号</label>
                <span class="weui-form-preview__value">{{ performance.contract_number }}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">签约时间</label>
                <span class="weui-form-preview__value">{{ performance.insert_time }}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">状态</label>
                <span class="weui-form-preview__value">
                  <template v-if="performance.status === 'OK##'">已签约</template>
                  <template v-else>已撤销</template>
                </span>
              </div>
            </div>
          </div>
        </group>
      </div>
      <x-dialog v-model="this.$store.state.app.dialogShow">
        <div class="dialog-message">
          {{ this.$store.state.app.dialogMessage }}
        </div>
        <span class="vux-close" @click="hideDialog">知道了</span>
      </x-dialog>
      <confirm v-model="undoConfirm"
          title="温馨提示"
          @on-confirm="onUndoConfirm">
        <p style="text-align:center;">你确定要撤销该订单吗?</p>
      </confirm>
    </div>
  </div>
</template>
<script>
  import { mapActions } from 'vuex'
  import CellFormPreview from 'vux/src/components/cell-form-preview'
  import Cell from 'vux/src/components/cell'
  import Group from 'vux/src/components/group'
  import Datetime from 'vux/src/components/datetime'
  import XDialog from 'vux/src/components/x-dialog'
  import Confirm from 'vux/src/components/confirm'
  import Q from 'q'
  import {showDialog, hideDialog} from '../lib/dialog'

  var dateFormat = require('dateformat')

  export default {
    components: {
      CellFormPreview,
      Cell,
      Group,
      Datetime,
      XDialog,
      Confirm
    },
    methods: {
      hideDialog: hideDialog,
      ...mapActions({
        'getPerformances': 'getPerformances',
        'undoOrder': 'undoOrder'
      }),
      change () {
      },
      loadPerformances (data) {

        return Q.promise((resolve, reject) => {
          let that = this
          let teamId = this.$route.query.team_id
          let params = {
            page_index: this.performance_page_index,
            page_size: this.performance_page_size,
            begin_time: this.$route.query.begin_time,
            end_time: this.$route.query.end_time
          }
          if (this.lock) return
          this.lock = true

          if (teamId) {
            params = Object.assign({}, params, {team_id: teamId, achie_type: 'TEA'})
          }
          if (this.performanceLoading === true || this.performanceHasMoreData === false) return
          this.performanceLoading = true
          params = Object.assign({}, params, data)
          this.dataTip = this.loadingText

          this.getPerformances(params).then((response) => {
            // const totalPage = Math.ceil(parseInt(response.data.results.total) / parseInt(this.performance_page_size))
            // this.performanceHasMoreData = this.performance_page_index < totalPage
            this.performanceHasMoreData = false
            this.performance_page_index++
            this.init = true
            this.lock = false

            setTimeout(() => {
              this.performanceLoading = false
              if (typeof response.data.results !== 'undefined' && response.data.results) {
                this.performances = this.performances.concat(response.data.results || [])
                if (!this.performances.length) {
                  this.dataTip = this.noDataText
                }
                resolve(true)
              } else {
                this.dataTip = this.noDataText
                this.performanceLoading = true
                console.warn('无业绩')
              }
            })
          }).catch((e) => {
            console.log(e)
            this.performanceLoading = false
            this.performanceHasMoreData = false
            this.dataTip = this.exceptionText
            this.lock = false
          })
        })
      },
      $undoOrder (performance) {
        return Q.Promise((resolve, reject) => {
          this.undoConfirm = true
          this.onUndoConfirm = resolve
        }).then(() => {
          showDialog('撤销订单成功!')
          // this.removePerformance(performance)
          performance.status = 'DEL#'
          this.undoOrder(performance).then((response) => {
            if (response.data.errcode === 0) {
            } else {
              console.debug(JSON.stringify(response.data))
            }
          }).catch((e) => {
            console.debug(e)
          })
        })
      },
      removePerformance (performance) {
        const pIndex = this.performances.indexOf(performance)
        if (pIndex > -1) this.performances.shift(pIndex)
      },
      emptyPerformance () {
        this.performance_page_index = 1
        this.performanceHasMoreData = true
        this.performances = []
        this.performanceLoading = false
      },
      initHeihgt () {
        this.winHeight = window.innerHeight
      }
    },
    watch: {
      beginTime (val) {
        let beginTime = this.beginTime  + ' 00:00:00'
        let endTime = this.endTime + ' 23:59:59'
        if (this.endTime && this.beginTime > this.endTime) {
          showDialog('开始时间不能大于结束时间')
          setTimeout(() => {
            this.beginTime = ''
          })
        } else if (this.endTime) {
          this.emptyPerformance()
          this.loadPerformances({
            begin_time: beginTime,
            end_time: endTime
          })
        }
      },
      endTime (val) {
        let beginTime = this.beginTime  + ' 00:00:00'
        let endTime = this.endTime + ' 23:59:59'
        if (this.beginTime && this.beginTime > this.endTime) {
          showDialog('结束时间不能小于开始时间')
          setTimeout(() => {
            this.endTime = ''
          })
        } else if (this.beginTime) {
          this.emptyPerformance()
          this.loadPerformances({
            begin_time: beginTime,
            end_time: endTime
          })
        }
      }
    },
    mounted () {
      this.initHeihgt()
      this.beginTime = dateFormat(this.$route.query.begin_time, 'yyyy-mm-dd')
      this.endTime = dateFormat(this.$route.query.end_time, 'yyyy-mm-dd')
      if (!this.init) {
        // this.loadPerformances()
      }
    },
    data () {
      return {
        onUndoConfirm () {},
        undoConfirm: false,
        winHeight: '',
        performance_page_size: 20,
        performance_page_index: 1,
        performanceHasMoreData: true,
        performanceLoading: false,
        performances: [],
        originalQueryData: {},
        beginTime: '',
        init: false,
        endTime: '',
        dataTip: '',
        noDataText: '暂无销售业绩',
        loadingText: '数据加载中...',
        exceptionText: '数据异常，请联系管理员',
        performances: []
      }
    }
  }
</script>
<style lang="less">
  @import '../less/base';
  .performance {
    // position: fixed;
    // width: 100%;

    .performance-list {
      height: 100%;
    }

    .weui-form-preview__value.left{
    }

    .undo-btn {
      font-size: 12px;
      padding: 2px 10px;
      border: 1px solid  #00AEEE;
      color: #00AEEE;
      border-radius: 4px;
    }
  }
</style>
